<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" style="padding-right: 5px;">
        <el-row>
          <el-col :span="8" style="padding-left: 12px; padding-right: 12px;">
            <el-form-item label="发布组织" prop="deptId" style="width: 100%;">
              <el-tree-select
                v-model="queryParams.deptId"
                :data="deptOptions"
                :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                value-key="deptId"
                placeholder="请选择发布组织"
                check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 12px; padding-right: 12px;">
            <el-form-item label="会议形式" prop="meetingWay" style="width: 100%;">
              <el-select v-model="queryParams.meetingWay" placeholder="请选择会议形式" clearable>
                <el-option
                  v-for="dict in sys_meeting_way"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 12px;">
            <el-form-item label="会议类型" prop="type_code" style="width: 100%;">
              <el-select v-model="queryParams.type_code" placeholder="请选择会议类型" clearable>
                <el-option
                  v-for="dict in pb_meeting_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" style="padding-left: 12px; padding-right: 12px;">
            <el-form-item label="会议名称" prop="title" style="width: 100%;">
              <el-input
                v-model="queryParams.title"
                placeholder="请输入会议名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 12px; padding-right: 12px;">
            <el-form-item label="会议时间" prop="startTime" style="width: 100%;">
              <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 12px;">
            <el-form-item label="会议状态" prop="status" style="width: 100%;">
              <el-select v-model="queryParams.status" placeholder="请选择会议状态" clearable>
                <el-option
                  v-for="dict in sys_meeting_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
      <el-row :gutter="10" class="mb8" style="margin: 15px 0px;">
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['partybuilding:MeetingInfo:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            icon="Download"
            @click="handleExport"
            v-hasPermi="['partybuilding:MeetingInfo:export']"
          >导出台账</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            icon="Calendar"
            @click="handleChart"
          >图表展示</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" @handleQuery="handleQuery" @resetQuery="resetQuery"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="MeetingInfoList">
        <el-table-column label="会议名称" align="left" prop="title" width="200" show-overflow-tooltip="true"/>
        <el-table-column label="发布组织" align="left" prop="deptName" min-width="200" show-overflow-tooltip="true"/>
        <el-table-column label="会议类型" align="left" prop="typeName" width="200" show-overflow-tooltip="true">
          <template #default="scope">
            {{ getTypeNames(scope.row.typeCode) }}
          </template>
        </el-table-column>
        <el-table-column label="发起人" align="left" prop="createBy" width="150"/>
        <el-table-column label="会议日期" align="left" prop="startTime" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="left" prop="startTime" width="150">
          <template #default="scope">
            <span>{{ parseTime(scope.row.startTime, '{h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会议形式" align="left" prop="meetingWay" width="150">
          <template #default="scope">
              <dict-tag :options="sys_meeting_way" :value="scope.row.meetingWay" />
          </template>
        </el-table-column>
        <el-table-column label="会议进度" align="left" prop="status" width="100">
          <template #default="scope">
              <dict-tag :options="sys_meeting_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="200">
          <template #default="scope">
            <el-button link type="primary"  @click="handleUpdate(scope.row)" v-hasPermi="['partybuilding:MeetingInfo:edit']">修改</el-button>
            <el-divider direction="vertical" />
            <el-button link type="primary"  @click="handleDelete(scope.row)" v-hasPermi="['partybuilding:MeetingInfo:remove']">删除</el-button>
            <el-divider direction="vertical" />
            <el-popover placement="bottom" trigger="click" :popper-style="{minWidth : '50px', padding : '9px', width : 'auto'}">
                <template #reference>
                    <el-button link type="primary" size="small">更多</el-button>
                </template>
                <div>
                    <a style="display: block;text-align: center;color: #ff7875;" href="#" @click="handleSignin(scope.row)" v-hasPermi="['partybuilding:MeetingInfo:signManage']">签到</a>
                    <el-divider style="margin: 9px 0px;"/>
                    <a style="display: block;text-align: center;color: #ff7875;" href="#" @click="handleSummary(scope.row)" v-hasPermi="['partybuilding:MeetingInfo:edit']">纪要</a>
                    <!--<el-divider style="margin: 9px 0px;"/>
                    <a style="display: block;text-align: center;color: #ff7875;" href="#" @click="handleDetail(scope.row)">查看详情</a>-->
                </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 会议签到对话框 -->
      <el-dialog title="签到" v-model="openSignin" width="1200px" heigth="519px" append-to-body @close="handleSignClose">
        <div class="dialog-top-line"></div>
        <div class="signTopContainer">
            <div style="width: 50%;padding: 19px;">
              <div class="title-div">
                <div class="title-text">签到确认情况:</div>
              </div>
              <div style="display: flex; justify-content: center;">
                <div style="margin: 0px 19px">
                  <div class="signNumber">{{ signStatObj.t1 }}</div>
                  <div class="signText">应参会数</div>
                </div>
                <div style="margin: 0px 19px">
                  <div class="signNumber">{{ signStatObj.t2? signStatObj.t2.length:0 }}</div>
                  <div class="signText">已签到数</div>
                </div>
                <div style="margin: 0px 19px">
                  <div class="signNumber">{{ signStatObj.t3? signStatObj.t3.length:0 }}</div>
                  <div class="signText">未签到数</div>
                </div>
              </div>
              <div class="title-div">
                <div class="title-text">参会情况:</div>
                <div class="tab-div">
                  <div :class="[isAlreadySign ? 'left-active' : '']"><a href="#" @click="handleAlreadySignin(true)">已签到</a></div>
                  <div :class="[!isAlreadySign ? 'left-active' : '']"><a href="#" @click="handleAlreadySignin(false)">未签到</a></div>
                </div>
              </div>
              <div style="padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-left: 49px;">
                  <div class="default-addbtn" v-for="item in signStatObj.t2" v-if="isAlreadySign">
                    <div class="circle">
                      <span style="line-height: 44px; transform: scale(1) translateX(-50%);">{{ item.userName ? item.userName.substring(1,3) : '' }}</span>
                    </div>
                    <span class="name-span">{{ item.userName }}</span>
                    <span class="state-span">{{ isAlreadySign ? '已签到' : '未签到' }}</span>
                  </div>
                  <div class="default-addbtn" v-for="item in signStatObj.t3" v-else>
                    <div class="circle">
                      <span style="line-height: 44px; transform: scale(1) translateX(-50%);">{{ item.userName ? item.userName.substring(1,3) : '' }}</span>
                    </div>
                    <span class="name-span">{{ item.userName }}</span>
                    <span class="state-span">{{ isAlreadySign ? '已签到' : '未签到' }}</span>
                  </div>
                  <div class="singlePersonDiv" @click="handleClickPeople" v-if="isAlreadySign">
                    <div class="circleAndText" style="background-color:#fff!important;border: 1px solid #ccc;margin-left: 3px;">
                        <el-icon size="25" style="margin-top: 9px;margin-left: 0px;"><Plus /></el-icon>
                    </div>
                    <div class="bottomText">手动添加</div>
                  </div>
              </div>
            </div>
            <el-divider direction="vertical" class="signDivider"/>
            <div style="width: 50%; align-items: center; margin-bottom: 10px;">
                <div v-if="signBegin!=null">
                  <div class="item-image-div" style="cursor: pointer;" @click="handleBigQrCode">
                    <vue-qrcode :value="qrCodeValue" :size="qrCodeSize" style="width: 159px;height: 159px; object-fit: fill; text-align: center;"></vue-qrcode>
                  </div>
                  <div class="er-tip" style="margin-top: 2px;">会议签到二维码，点击<a href="#" style="color: blue;" @click="handleBigQrCode">查看</a>大图</div>
                </div>
                <div v-else>
                  <div class="item-image-div" >
                    <img class="img" src="@/assets/images/qrcode_no.png" style="height: 158px; width: 158px;" fit="fill" />
                  </div>
                  <div class="er-tip" style="margin-top: 2px;">请点击下面【开启签到】按钮生成会议签到二维码</div>
                </div>

                <div style="margin-top: 20px;">
                  <el-button v-if="signBegin!=null" disabled style="background-color: #f5f5f5; border: 1px solid #ff4d4f; color: #ff4d4f">已开启</el-button>
                  <el-button @click="handleBeginSignin" v-else>开启签到</el-button>
                </div>

                <div style="display: flex; justify-content: center; margin-top: 25px;">
                  <div style="margin-top: 5px;">签到截止：</div>
                  <div>
                    <el-select v-model="signDelay" placeholder="请选择签到截止时间" clearable style="width: 200px;">
                      <el-option
                        v-for="dict in pb_meeting_sign_delay"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                  </div>
                </div>
            </div>
        </div>
        <div class="signBottomContainer">
          <el-button @click="handleBigScreen" type="danger">大屏展示</el-button>
        </div>
      </el-dialog>
  
      <!-- 预览二维码对话框 -->
      <el-dialog title="会议二维码" v-model="openBigQrCode" width="519px" append-to-body>
        <div class="dialog-top-line"></div>
        <div style="width: 100%; height: 100%;">
          <vue-qrcode :value="qrCodeValue" :size="qrCodeSize" style="width: 100%;height: 100%; object-fit: fill; text-align: center;"></vue-qrcode>
        </div>
        <div class="dialog-bottom-line"></div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancelBigQrCode">关 闭</el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 添加或修改会议信息对话框 -->
      <AddMeetInfo ref="addMeetInfoRef" :parentMethod="getList"/>

      <!-- 修改会议纪要对话框 -->
      <AddSummary ref="addSummaryRef"/>

      <!-- 参会人员对话框 -->
      <select-one-people ref="userPeopleRef" :parentMethod="signPeopleMethod"></select-one-people>
    </div>
  </template>
  
  <script setup name="MeetingInfo">
  import { orgAllList } from "@/api/partybuilding/Org";
  import { listMeetingInfo, delMeetingInfo, admSign, meetingSignBegin } from "@/api/partybuilding/MeetingInfo";
  import { meetingSignStat } from "@/api/partybuilding/MeetingReceipt";
  import AddMeetInfo from './component/AddMeetInfo.vue';
  import AddSummary from './component/AddSummary.vue';
  import SelectOnePeople from './component/SelectOnePeople.vue';
  import router from "@/router";
  const baseUrl = import.meta.env.VITE_SITE_SIGN_URL;
  const { proxy } = getCurrentInstance();
  const { pb_meeting_type } = proxy.useDict("pb_meeting_type");
  const { sys_meeting_way } = proxy.useDict("sys_meeting_way");
  const { sys_meeting_status } = proxy.useDict("sys_meeting_status");
  const { pb_meeting_sign_delay } = proxy.useDict("pb_meeting_sign_delay");
  const MeetingInfoList = ref([]);
  const openSignin = ref(false);
  const openBigQrCode = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const isAlreadySign = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const dateRange = ref([]);
  const deptOptions = ref(undefined);
  const addMeetInfoRef = ref(null);
  const signDelay = ref("15");
  const signStatObj = ref({});
  const userPeopleRef = ref(null);
  const signMeetingId = ref(null);
  const signMeetingName = ref(null);
  const signBegin = ref(null);
  const qrCodeValue = ref("");
  const qrCodeSize = 399;

  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      typeName: null,
      status: null,
      title: null,
      startTime: null,
      durtion: null,
      deptId: null,
      deptName: null,
      typeCode: null,
      meetingTopic: null,
      meetingWay: null,
      detailWay: null,
      signWay: null,
      meetingAddr: null,
      detailAddr: null,
      users: null,
      attendance: null,
      content: null,
      fileUrl: null,
      createrId: null,
    }
  });
  
  const { queryParams } = toRefs(data);
  
  // 获取会议类型
  function getTypeNames(typeIds) {
    if (typeIds!=null && typeIds.length > 0) {
      let typeNames = "";
      typeIds.split(",").forEach(item => {
        let typeName = pb_meeting_type.value.find(type => type.value == item);
        if (typeName!=null) {
          typeNames += typeName.label + "、";
        }
      });
      return typeNames.substring(0, typeNames.length - 1);
    } else {
      return "";
    }
  }

  /** 查询会议信息列表 */
  function getList() {
    loading.value = true;
    listMeetingInfo(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
      MeetingInfoList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  }

  // 图表展示
  function handleChart() {
    router.push({ path: "/work/MeetingInfo", query: { pageNum: 1 } });
  }

  //进入签到
  function handleSignin(row) {
    signMeetingId.value = row.id;
    signMeetingName.value = row.title;
    signBegin.value = row.signBegin;
    let obj ={};
    obj.meetingId = row.id;
    meetingSignStat(obj).then(response => {
      signStatObj.value = response.data;
      qrCodeValue.value = baseUrl+"/signLogin?meetingId="+signMeetingId.value;
      openSignin.value = true;
    });
  }

  //单击手动添加签到人员
  function handleClickPeople() {
      userPeopleRef.value.show();
  }

  //签到人员回调函数
  function signPeopleMethod(uId, uName) {
      if (uId!=null) {
        let obj ={};
        obj.userId = uId;
        admSign(signMeetingId.value, obj).then(response => {
          getSignPeopleList();
        });
      }
  }

  //查询签到人员参会情况
  function getSignPeopleList() {
    let statObj ={};
    statObj.meetingId = signMeetingId.value;
    meetingSignStat(statObj).then(response => {
      signStatObj.value = response.data;
    });
  }

  // 开启签到
  function handleBeginSignin() {
    let obj ={};
    obj.meetingId = signMeetingId.value;
    obj.signDelay = signDelay.value;
    meetingSignBegin(obj).then(response => {
      qrCodeValue.value = baseUrl+"/signLogin?meetingId="+signMeetingId.value;
      signBegin.value = "开启成功";
    });
  }

  // 预览大图二维码 
  function handleBigQrCode() {
    openBigQrCode.value = true;
  }

  // 关闭预览大图二维码 
  function cancelBigQrCode() {
    openBigQrCode.value = false;
  }

  //大屏显示
  function handleBigScreen() {
    const params = new URLSearchParams({
      meetingId: signMeetingId.value,
      meetingName: signMeetingName.value
      }).toString();
    window.open(`/work/bigScreen?${params}`, '_blank');
  }

  /** 查询部门下拉树结构 */
  function getDeptTree() {
    orgAllList().then(response => {
      deptOptions.value = proxy.handleTree(response.rows, "deptId");
    });
  };
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    dateRange.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }
  
  /** 新增按钮操作 */
  function handleAdd() {
    proxy.$refs["addMeetInfoRef"].show();
  }
  
  /** 修改按钮操作 */
  function handleUpdate(row) {
    proxy.$refs["addMeetInfoRef"].show(row.id, false);
  }

  /** 会议纪要按钮操作 */
  function handleSummary(row) {
    proxy.$refs["addSummaryRef"].show(row.id);
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除会议名称为"' + row.title + '"的数据项？').then(function() {
      return delMeetingInfo(_ids);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
  
  /** 导出按钮操作 */
  function handleExport() {
    proxy.download('partybuilding/MeetingInfo/export', {
      ...queryParams.value
    }, `MeetingInfo_${new Date().getTime()}.xlsx`)
  }
  
  function handleAlreadySignin(flag) {
    getSignPeopleList();
    isAlreadySign.value = flag;
  }

  function handleSignClose() {
    openSignin.value = false;
  }

  getDeptTree();
  getList();
  </script>
  <style lang="scss" scoped>
  .dialog-top-line {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    left: 0px;
    top: 50px;
  }
  .dialog-bottom-line {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    left: 0px;
    bottom: 65px;
  }
  .signTopContainer {
    display: flex;
    width: 100%;
    height: 340px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .signDivider {
    height: 313px;
    margin: 1px 0px;
  }
  .signBottomContainer {
    text-align: center;
  }
  .signNumber {
    color: #ff4d4f;
    background-color: #fff;
    font-size: 24px;
    font-family: Helvetica;
    line-height: 40px;
    text-align: center;
  }
  .signText {
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-family: PingFangSC-Regular;
    text-align: center;
    line-height: 20px;
    margin-bottom: 15px;
  }
  .title-div {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title-div .title-text {
    text-align: left; 
    margin-bottom: 10px; 
    color: rgba(0, 0, 0, .85); 
    font-size: 16px;
  }
  .tab-div {
    float: right;
    color: rgba(0, 0, 0, .65);
    font-size: 14px!important;
    text-align: center;
    font-family: PingFangSC-Regular;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
  }
  .tab-div>div {
    float: left;
    padding: 2px 10px;
    line-height: 19px;
    display: block;
    text-align: center;
  }
  .tab-div .left-active {
    border: 1px solid #ff4d4f;
    color: #ff4d4f;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .default-addbtn {
    cursor: pointer;
    width: 64px;
    height: 86px;
    float: left;
    position: relative;
    margin-bottom: 10px;
    margin-right: 19px;
  }
  .default-addbtn .name-span {
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 20px;
    left: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .default-addbtn .state-span {
    color: #ccc;
    font-size: 12px;
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 20px;
  }
  .er-tip {
    width: 100%;
    color: rgba(0, 0, 0, .45);
    font-size: 14px;
    margin-bottom: 16px;
  }
  .circle {
    display: block;
    height: 44px;
    width: 44px;
    line-height: 44px;
    border-radius: 50%;
    background: rgba(255,77,79,.06);
    border: 1px solid #ffe3e3;
    margin-left: 10px;
  }
  .singlePersonDiv {
    position: relative;
    display: block;
    width: 64px;
    height: 66px;
    float: left;
    margin-right: 10px;
    text-align: left;
    cursor: pointer;
    .closeDiv {
        position: absolute;
        top: -11px;
        right: 7px;
        font-size: 16px;
        cursor: pointer;
    }
    .circleAndText {
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        border-radius: 50%;
        border: 1px solid #ffe3e3;
        color: #333;
        font-size: 14px;
        background-color: rgba(255, 77, 79, .06);
    }
    .bottomText {
        font-size: 14px;
        color: #595959;
        margin-top: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
  }
  </style>